<!-- 个人信息修改页 -->

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 表单数据
const form = ref({
  avatar: 'https://picsum.photos/120/120',
  cover: 'https://picsum.photos/800/240', // 添加封面图片
  name: '科技新闻观察员',
  birthday: '2002-01-01',
  gender: '男',
  description:
    '从事科技新闻报道10年，专注于人工智能、区块链、云计算等前沿技术领域的深度报道。曾获得多项新闻奖项，发表过数百篇科技类文章。'
})

// 头像上传相关
const avatarRef = ref()
// 封面上传相关
const coverRef = ref()

// 上传头像
const handleAvatarSuccess = (response: any) => {
  form.value.avatar = response.url
}

// 上传封面
const handleCoverSuccess = (response: any) => {
  form.value.cover = response.url
}

// 保存修改
const handleSave = async () => {
  ElMessage.success('保存成功')
  router.push('/user/profile')
}

// 取消修改
const handleCancel = () => {
  router.back()
}
</script>

<template>
  <div class="max-w-[1000px] mx-auto py-8 px-4">
    <div class="bg-white rounded-lg shadow-lg">
      <!-- 封面 -->
      <div class="w-full h-[240px] bg-[#f8f8fa] relative">
        <div class="absolute top-4 right-4">
          <el-upload
            ref="coverRef"
            class="cover-uploader"
            action="/api/upload"
            :show-file-list="false"
            :on-success="handleCoverSuccess"
          >
            <el-button
              plain
              icon="CameraFilled"
              >上传封面图片</el-button
            >
          </el-upload>
        </div>
      </div>

      <!-- 表单内容 -->
      <div class="p-6">
        <el-form
          :model="form"
          label-width="100px"
          class="space-y-6"
        >
          <!-- 头像 -->
          <el-form-item label="头像">
            <div class="relative">
              <el-avatar
                :size="140"
                :src="form.avatar"
                shape="square"
              />
              <el-upload
                ref="avatarRef"
                class="avatar-uploader absolute inset-0 flex flex-col items-center justify-center"
                action="/api/upload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
              >
                <div class="flex flex-col items-center">
                  <el-icon class="text-white text-2xl"><Camera /></el-icon>
                  <span class="text-white text-sm mt-2">更换头像</span>
                </div>
              </el-upload>
            </div>
          </el-form-item>

          <!-- 基本信息 -->
          <el-form-item label="昵称">
            <el-input
              v-model="form.name"
              placeholder="请输入你的名字"
              maxlength="20"
              show-word-limit
            />
          </el-form-item>

          <el-form-item label="生日">
            <el-date-picker
              v-model="form.birthday"
              type="date"
              placeholder="请选择生日"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>

          <el-form-item label="性别">
            <el-radio-group v-model="form.gender">
              <el-radio value="man">男</el-radio>
              <el-radio value="woman">女</el-radio>
              <el-radio value="secrecy">保密</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="个人简介">
            <el-input
              v-model="form.description"
              type="textarea"
              :rows="4"
              placeholder="详细介绍自己，让大家更好地了解你"
              maxlength="1000"
              show-word-limit
            />
          </el-form-item>
        </el-form>

        <!-- 操作按钮 -->
        <div class="flex justify-end gap-4 mt-8">
          <el-button @click="handleCancel">取消</el-button>
          <el-button
            type="primary"
            @click="handleSave"
          >
            保存
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.avatar-uploader {
  :deep(.el-upload) {
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);

    &:hover {
      border-color: var(--el-color-primary);
    }
  }
}

.cover-uploader {
  :deep(.el-upload) {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.el-form {
  :deep(.el-form-item__label) {
    font-weight: 500;
  }
}

.el-button--primary {
  --el-button-bg-color: #056de8;
  --el-button-border-color: #056de8;
  --el-button-hover-bg-color: #0461cf;
  --el-button-hover-border-color: #0461cf;
}
</style>
